<template>
  <div class="archives-page">
    <!-- 页面头部区域 -->
    <div class="archives-header">
      <div class="header-content">
        <div class="ancient-title">生灵档案管理</div>
        <div class="header-subtitle">阴曹地府 · 档案司管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 扩展统计信息 -->
    <!-- <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">总档案数</div>
              <div class="stat-value">{{ totalCount?.toLocaleString() }}</div>
              <div class="stat-label">累计管理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card alive-stat">
            <div class="stat-icon">
              <HeartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">在世人数</div>
              <div class="stat-value">{{ aliveCount?.toLocaleString() }}</div>
              <div class="stat-label">存续生命</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card dead-stat">
            <div class="stat-icon">
              <BookOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">已故人数</div>
              <div class="stat-value">{{ deadCount?.toLocaleString() }}</div>
              <div class="stat-label">归档记录</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card karma-stat">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均业力</div>
              <div class="stat-value">{{ averageKarma }}</div>
              <div class="stat-label">道德指数</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row :gutter="[20, 20]" class="stats-grid" style="margin-top: 20px">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card today-stat">
            <div class="stat-icon">
              <CalendarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日新增</div>
              <div class="stat-value">{{ todayNewArchives }}</div>
              <div class="stat-label">档案登记</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card update-stat">
            <div class="stat-icon">
              <EditOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">本周更新</div>
              <div class="stat-value">{{ weekUpdates }}</div>
              <div class="stat-label">信息修订</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待审核</div>
              <div class="stat-value">{{ pendingReview }}</div>
              <div class="stat-label">等待确认</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card completion-stat">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">完整度</div>
              <div class="stat-value">{{ Math.round(completionRate) }}%</div>
              <div class="stat-label">信息完备</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div> -->

    <!-- 搜索和操作栏 -->
    <a-card :bordered="false" class="search-card modern-card">
      <a-row :gutter="[16, 16]" align="middle">
        <a-col :xs="24" :sm="12" :md="8">
          <a-input-search v-model:value="searchQuery" placeholder="搜索姓名、档案号或身份证" @search="handleSearch" class="search-input">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input-search>
        </a-col>

        <a-col :xs="24" :sm="12" :md="6">
          <a-select v-model:value="statusFilter" placeholder="状态筛选" @change="handleFilterChange" class="filter-select">
            <a-select-option value="all">全部状态</a-select-option>
            <a-select-option value="alive">在世</a-select-option>
            <a-select-option value="dead">已故</a-select-option>
          </a-select>
        </a-col>

        <a-col :xs="24" :sm="12" :md="6">
          <a-select v-model:value="genderFilter" placeholder="性别筛选" @change="handleFilterChange" class="filter-select">
            <a-select-option value="all">全部性别</a-select-option>
            <a-select-option value="male">男</a-select-option>
            <a-select-option value="female">女</a-select-option>
          </a-select>
        </a-col>

        <a-col :xs="24" :sm="12" :md="4">
          <a-space>
            <a-button type="primary" @click="showCreateArchive">
              <PlusOutlined />
              新增档案
            </a-button>
            <a-button @click="handleReset">
              <ReloadOutlined />
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 左侧主要内容 -->
        <a-col :xs="24" :lg="18">
          <!-- 档案列表 -->
          <a-card :bordered="false" class="table-card modern-card">
            <a-table :columns="columns" :data-source="filteredArchives" :scroll="{ x: 1300, y: 1600 }" :loading="loading" :pagination="pagination" row-key="id" class="archives-table">
              <!-- 头像列 -->
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'avatar'">
                  <a-avatar :src="record.avatar" :size="40">
                    {{ record.name?.charAt(0) }}
                  </a-avatar>
                </template>

                <!-- 姓名列 -->
                <template v-else-if="column.key === 'name'">
                  <a-space direction="vertical" size="small">
                    <span class="name-text">{{ record.name }}</span>
                    <a-tag :color="record.gender === 'male' ? 'blue' : 'pink'" size="small">
                      {{ record.gender === 'male' ? '男' : '女' }}
                    </a-tag>
                  </a-space>
                </template>

                <!-- 基本信息列 -->
                <template v-else-if="column.key === 'basicInfo'">
                  <a-space direction="vertical" size="small">
                    <span>{{ record.basicInfo?.profession || '未知' }}</span>
                    <a-tag size="small">{{ record.basicInfo?.maritalStatus || '未知' }}</a-tag>
                  </a-space>
                </template>

                <!-- 状态列 -->
                <template v-else-if="column.key === 'status'">
                  <a-tag :color="record.status === 'alive' ? 'green' : 'red'">
                    {{ record.status === 'alive' ? '在世' : '已故' }}
                  </a-tag>
                </template>

                <!-- 业力列 -->
                <template v-else-if="column.key === 'karma'">
                  <a-progress :percent="Math.min(Math.max((record.karma + 100) / 2, 0), 100)" :stroke-color="getKarmaColor(record.karma)" :show-info="false" size="small" />
                  <div class="karma-value">{{ record.karma }}</div>
                </template>

                <!-- 寿命列 -->
                <template v-else-if="column.key === 'lifespan'">
                  <a-space direction="vertical" size="small">
                    <span>{{ record.age }} / {{ record.lifespan }}岁</span>
                    <a-progress :percent="(record.age / record.lifespan) * 100" :stroke-color="getLifespanColor(record.age, record.lifespan)" :show-info="false" size="small" />
                  </a-space>
                </template>

                <!-- 操作列 -->
                <template v-else-if="column.key === 'actions'">
                  <a-space class="actions-space">
                    <a-dropdown>
                      <a-button type="link" size="small">
                        <EyeOutlined />
                        查看详情
                        <DownOutlined />
                      </a-button>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item @click="viewBasicInfo(record)">
                            <UserOutlined />
                            个人基础信息
                          </a-menu-item>
                          <a-menu-item @click="viewLifeHistory(record)">
                            <ClockCircleOutlined />
                            生命历程管理
                          </a-menu-item>
                          <a-menu-item @click="viewSocialNetwork(record)">
                            <TeamOutlined />
                            社会关系网络
                          </a-menu-item>
                          <a-menu-item @click="viewArchiveInfo(record)">
                            <FolderOutlined />
                            档案信息
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                    <a-button type="link" size="small" @click="editArchive(record)">
                      <EditOutlined />
                      编辑
                    </a-button>
                    <a-button type="link" size="small" @click="deleteArchive(record)" danger>
                      <DeleteOutlined />
                      删除
                    </a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>

        <!-- 右侧侧边栏 -->
        <a-col :xs="24" :lg="6">
          <div class="sidebar-panel">
            <!-- 档案分析统计 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <TrophyOutlined class="section-icon" />
                  业力分布分析
                </h3>
              </div>

              <div class="karma-distribution">
                <div v-for="item in karmaDistribution" :key="item.range" class="karma-item">
                  <div class="karma-header">
                    <span class="karma-range">{{ item.range }}</span>
                    <span class="karma-count">{{ item.count }}人</span>
                  </div>
                  <div class="karma-progress">
                    <div
                      class="progress-bar"
                      :style="{
                        width: item.percentage + '%',
                        backgroundColor: item.color
                      }"
                    ></div>
                  </div>
                  <div class="karma-percentage">{{ item.percentage }}%</div>
                </div>
              </div>
            </div>

            <!-- 年龄分布统计 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <UserOutlined class="section-icon" />
                  年龄段分布
                </h3>
              </div>

              <div class="age-distribution">
                <div v-for="age in ageGroups" :key="age.group" class="age-item">
                  <div class="age-header">
                    <span class="age-group">{{ age.group }}</span>
                    <span class="age-count">{{ age.count }}人</span>
                  </div>
                  <div class="age-progress">
                    <div
                      class="progress-bar"
                      :style="{
                        width: age.percentage + '%',
                        backgroundColor: '#1890ff'
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 职业分布 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <BookOutlined class="section-icon" />
                  职业分布
                </h3>
              </div>

              <div class="profession-stats">
                <div v-for="profession in professionStats" :key="profession.name" class="profession-item">
                  <div class="profession-info">
                    <span class="profession-name">{{ profession.name }}</span>
                    <span class="profession-count">{{ profession.count }}</span>
                  </div>
                  <div class="profession-bar">
                    <div
                      class="bar-fill"
                      :style="{
                        width: profession.percentage + '%',
                        backgroundColor: profession.color
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 最近操作记录 -->
            <div class="section-wrapper compact">
              <div class="section-header">
                <h3 class="section-title">
                  <ClockCircleOutlined class="section-icon" />
                  最近操作
                </h3>
              </div>

              <div class="recent-activities">
                <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                  <div class="activity-dot" :style="{ backgroundColor: activity.color }">
                    <component :is="activity.icon" />
                  </div>
                  <div class="activity-content">
                    <div class="activity-title">{{ activity.title }}</div>
                    <div class="activity-time">{{ activity.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 新增/编辑档案弹窗 -->
    <a-modal v-model:open="showAddModal" :title="editingArchive ? '编辑档案' : '新增档案'" :width="800" @ok="handleSaveArchive" @cancel="handleCancelEdit">
      <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="archive-form">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="姓名" name="name">
              <a-input v-model:value="formData.name" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别" name="gender">
              <a-radio-group v-model:value="formData.gender">
                <a-radio value="male">男</a-radio>
                <a-radio value="female">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="出生日期" name="birthDate">
              <a-date-picker v-model:value="formData.birthDate" placeholder="请选择出生日期" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="预定寿命" name="lifespan">
              <a-input-number v-model:value="formData.lifespan" :min="1" :max="200" placeholder="请输入预定寿命" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="籍贯" name="birthPlace">
              <a-input v-model:value="formData.birthPlace" placeholder="请输入籍贯" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="职业" name="profession">
              <a-select v-model:value="formData.profession" placeholder="请选择职业">
                <a-select-option value="商人">商人</a-select-option>
                <a-select-option value="农民">农民</a-select-option>
                <a-select-option value="学者">学者</a-select-option>
                <a-select-option value="官员">官员</a-select-option>
                <a-select-option value="工匠">工匠</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="居住地址" name="location">
          <a-input v-model:value="formData.location" placeholder="请输入居住地址" />
        </a-form-item>

        <a-form-item label="备注" name="notes">
          <a-textarea v-model:value="formData.notes" placeholder="请输入备注信息" :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import {
  SearchOutlined,
  PlusOutlined,
  ReloadOutlined,
  EyeOutlined,
  EditOutlined,
  DownOutlined,
  DeleteOutlined,
  UserOutlined,
  HeartOutlined,
  BookOutlined,
  TrophyOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  TeamOutlined,
  FolderOutlined
} from '@ant-design/icons-vue'
import { useArchivesStore } from '@/stores'

// 子组件已移至独立页面，不再需要在此导入

// 路由和状态管理
const router = useRouter()
const archivesStore = useArchivesStore()

// 响应式数据
const loading = ref(false)
const showAddModal = ref(false)
const editingArchive = ref(null)
const formRef = ref()

// 搜索和过滤
const searchQuery = ref('')
const statusFilter = ref('all')
const genderFilter = ref('all')

// 表单数据
const formData = reactive({
  name: '',
  gender: 'male',
  birthDate: null,
  lifespan: 75,
  birthPlace: '',
  profession: '',
  location: '',
  notes: ''
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  lifespan: [{ required: true, message: '请输入预定寿命', trigger: 'blur' }],
  birthPlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
  profession: [{ required: true, message: '请选择职业', trigger: 'change' }]
}

// 表格列配置
const columns = [
  {
    title: '头像',
    key: 'avatar',
    width: 80,
    align: 'center'
  },
  {
    title: '基本信息',
    key: 'name',
    width: 120
  },
  {
    title: '档案号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '身份信息',
    key: 'basicInfo',
    width: 120
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 80,
    sorter: (a, b) => a.age - b.age
  },
  {
    title: '状态',
    key: 'status',
    width: 100
  },
  {
    title: '业力值',
    key: 'karma',
    width: 120,
    sorter: (a, b) => a.karma - b.karma
  },
  {
    title: '寿命进度',
    key: 'lifespan',
    width: 150
  },
  {
    title: '居住地',
    dataIndex: 'location',
    key: 'location',
    ellipsis: true
  },
  {
    title: '操作',
    key: 'actions',
    width: 330,
    align: 'center',
    fixed: 'right'
  }
]

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 新增统计数据
const todayNewArchives = ref(23)
const weekUpdates = ref(156)
const pendingReview = ref(12)
const completionRate = ref(87.5)

// 业力分布数据
const karmaDistribution = ref([
  { range: '90-100 (圣贤)', count: 245, percentage: 15, color: '#52c41a' },
  { range: '70-89 (善良)', count: 678, percentage: 42, color: '#1890ff' },
  { range: '50-69 (中等)', count: 445, percentage: 28, color: '#faad14' },
  { range: '30-49 (偏恶)', count: 178, percentage: 11, color: '#fa541c' },
  { range: '0-29 (极恶)', count: 65, percentage: 4, color: '#f5222d' }
])

// 年龄段分布
const ageGroups = ref([
  { group: '0-18岁', count: 234, percentage: 15 },
  { group: '19-35岁', count: 567, percentage: 36 },
  { group: '36-50岁', count: 445, percentage: 28 },
  { group: '51-65岁', count: 234, percentage: 15 },
  { group: '65岁以上', count: 95, percentage: 6 }
])

// 职业分布统计
const professionStats = ref([
  { name: '农民', count: 456, percentage: 32, color: '#52c41a' },
  { name: '商人', count: 345, percentage: 24, color: '#1890ff' },
  { name: '学者', count: 234, percentage: 16, color: '#722ed1' },
  { name: '官员', count: 178, percentage: 12, color: '#fa541c' },
  { name: '工匠', count: 156, percentage: 11, color: '#faad14' },
  { name: '其他', count: 75, percentage: 5, color: '#13c2c2' }
])

// 最近活动记录
const recentActivities = ref([
  {
    id: 1,
    title: '新增档案：张三',
    time: '5分钟前',
    icon: PlusOutlined,
    color: '#52c41a'
  },
  {
    id: 2,
    title: '更新档案：李四',
    time: '15分钟前',
    icon: EditOutlined,
    color: '#1890ff'
  },
  {
    id: 3,
    title: '删除档案：王五',
    time: '1小时前',
    icon: DeleteOutlined,
    color: '#fa541c'
  },
  {
    id: 4,
    title: '批量导入完成',
    time: '2小时前',
    icon: ReloadOutlined,
    color: '#722ed1'
  }
])

// 计算属性
const filteredArchives = computed(() => archivesStore.filteredArchives)
const totalCount = computed(() => archivesStore.totalCount)
const aliveCount = computed(() => archivesStore.aliveCount)
const deadCount = computed(() => archivesStore.deadCount)
const averageKarma = computed(() => archivesStore.averageKarma)

// 方法
const handleSearch = () => {
  archivesStore.setSearchQuery(searchQuery.value)
}

const handleFilterChange = () => {
  archivesStore.setFilters({
    status: statusFilter.value,
    gender: genderFilter.value
  })
}

const handleReset = () => {
  searchQuery.value = ''
  statusFilter.value = 'all'
  genderFilter.value = 'all'
  archivesStore.resetFilters()
}

const getKarmaColor = (karma) => {
  if (karma >= 80) return '#52c41a'
  if (karma >= 40) return '#1890ff'
  if (karma >= 0) return '#faad14'
  if (karma >= -40) return '#fa541c'
  return '#f5222d'
}

const getLifespanColor = (age, lifespan) => {
  const ratio = age / lifespan
  if (ratio < 0.5) return '#52c41a'
  if (ratio < 0.8) return '#faad14'
  return '#fa541c'
}

// 页面跳转方法
const viewBasicInfo = (record) => {
  router.push(`/archives/${record.id}/basic`)
}

const viewLifeHistory = (record) => {
  router.push(`/archives/${record.id}/life-history`)
}

const viewSocialNetwork = (record) => {
  router.push(`/archives/${record.id}/social-network`)
}

const viewArchiveInfo = (record) => {
  router.push(`/archives/${record.id}/archive-info`)
}

// 编辑档案
const editArchive = (record) => {
  editingArchive.value = record

  // 处理日期格式
  let birthDate = null
  if (record.lifeHistory?.birthDate) {
    try {
      // 如果已经是dayjs对象，直接使用
      if (dayjs.isDayjs(record.lifeHistory.birthDate)) {
        birthDate = record.lifeHistory.birthDate
      } else {
        // 如果是字符串，转换为dayjs对象
        birthDate = dayjs(record.lifeHistory.birthDate)
      }
    } catch (error) {
      console.warn('日期格式转换失败:', error)
      birthDate = null
    }
  }

  Object.assign(formData, {
    name: record.name,
    gender: record.gender,
    birthDate: birthDate,
    lifespan: record.lifespan,
    birthPlace: record.basicInfo?.birthPlace || '',
    profession: record.basicInfo?.profession || '',
    location: record.location || '',
    notes: record.notes || ''
  })
  showAddModal.value = true
}

// 新增档案
const showCreateArchive = () => {
  editingArchive.value = null
  resetFormData()
  showAddModal.value = true
}

// 删除档案
const deleteArchive = async (record) => {
  try {
    await archivesStore.deleteArchive(record.id)
    message.success('档案删除成功')
  } catch (error) {
    message.error('删除失败：' + error.message)
  }
}

// 保存档案
const handleSaveArchive = async () => {
  try {
    await formRef.value.validate()

    // 处理日期格式 - 将dayjs对象转换为字符串
    let birthDateString = null
    if (formData.birthDate) {
      try {
        if (dayjs.isDayjs(formData.birthDate)) {
          birthDateString = formData.birthDate.format('YYYY-MM-DD')
        } else {
          // 如果不是dayjs对象，尝试转换
          birthDateString = dayjs(formData.birthDate).format('YYYY-MM-DD')
        }
      } catch (error) {
        console.warn('保存时日期格式转换失败:', error)
        birthDateString = null
      }
    }

    const archiveData = {
      name: formData.name,
      gender: formData.gender,
      lifespan: formData.lifespan,
      location: formData.location,
      notes: formData.notes,
      basicInfo: {
        fullName: formData.name,
        birthPlace: formData.birthPlace,
        profession: formData.profession,
        currentAddress: formData.location
      },
      lifeHistory: {
        birthDate: birthDateString
      }
    }

    if (editingArchive.value) {
      // 编辑档案
      const result = await archivesStore.updateArchive(editingArchive.value.id, archiveData)
      if (result.success) {
        message.success('档案更新成功')
      } else {
        message.error('更新失败：' + result.error)
      }
    } else {
      // 新增档案
      const result = await archivesStore.addArchive(archiveData)
      if (result.success) {
        message.success('档案创建成功')
      } else {
        message.error('创建失败：' + result.error)
      }
    }

    handleCancelEdit()
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 取消编辑
const handleCancelEdit = () => {
  showAddModal.value = false
  editingArchive.value = null
  formRef.value?.resetFields()
  resetFormData()
}

// 重置表单数据
const resetFormData = () => {
  Object.assign(formData, {
    name: '',
    gender: 'male',
    birthDate: null,
    lifespan: 75,
    birthPlace: '',
    profession: '',
    location: '',
    notes: ''
  })
}

// 快速操作方法
const exportData = () => {
  message.info('导出功能开发中...')
}

const batchProcess = () => {
  message.info('批量处理功能开发中...')
}

const archiveBackup = () => {
  message.info('备份功能开发中...')
}

// 生命周期
onMounted(async () => {
  loading.value = true
  await archivesStore.fetchArchives()
  loading.value = false
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.archives-page {
  padding: 0;

  // 页面头部区域
  .archives-header {
    text-align: center;
    margin-bottom: 48px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 48px;

    .stats-grid {
      .stat-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 24px;
        height: 120px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, transparent, currentColor, transparent);
          opacity: 0.6;
        }

        &.primary-stat {
          color: $secondary-color;
          border-color: rgba(212, 153, 10, 0.2);
        }

        &.alive-stat {
          color: #52c41a;
          border-color: rgba(82, 196, 26, 0.2);
        }

        &.dead-stat {
          color: #fa541c;
          border-color: rgba(245, 84, 28, 0.2);
        }

        &.karma-stat {
          color: $primary-color;
          border-color: rgba(114, 46, 209, 0.2);
        }

        &.today-stat {
          color: #13c2c2;
          border-color: rgba(19, 194, 194, 0.2);
        }

        &.update-stat {
          color: #1890ff;
          border-color: rgba(24, 144, 255, 0.2);
        }

        &.pending-stat {
          color: #fa8c16;
          border-color: rgba(250, 140, 22, 0.2);
        }

        &.completion-stat {
          color: #722ed1;
          border-color: rgba(114, 46, 209, 0.2);
        }

        .stat-icon {
          font-size: 36px;
          margin-right: 20px;
          opacity: 0.8;
        }

        .stat-content {
          flex: 1;

          .stat-title {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 8px;
            font-weight: 500;
          }

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: currentColor;
            margin-bottom: 4px;
            line-height: 1;
          }

          .stat-label {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
      }
    }
  }

  .search-card {
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

    &.modern-card {
      .ant-card-body {
        padding: 24px;
      }
    }

    .search-input,
    .filter-select {
      width: 100%;

      &.ant-input-affix-wrapper,
      &.ant-select {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: $text-primary;

        &:hover {
          border-color: $primary-color;
        }

        &:focus,
        &.ant-select-focused {
          border-color: $primary-color;
          box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
        }
      }

      input {
        background: transparent;
        color: $text-primary;

        &::placeholder {
          color: $text-tertiary;
        }
      }
    }

    .ant-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: $text-primary;
      border-radius: 8px;

      &:hover {
        background: rgba(114, 46, 209, 0.1);
        border-color: $primary-color;
        color: $primary-color;
      }

      &.ant-btn-primary {
        background: $primary-color;
        border-color: $primary-color;
        color: white;

        &:hover {
          background: $primary-color-light;
          border-color: $primary-color-light;
        }
      }
    }
  }

  .table-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

    &.modern-card {
      .ant-card-body {
        padding: 24px;
      }
    }

    .archives-table {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-primary;
        font-weight: 600;
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: $text-primary;
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(114, 46, 209, 0.05);
      }

      .name-text {
        font-weight: 500;
        color: $primary-color;
      }

      .karma-value {
        text-align: center;
        font-size: 12px;
        margin-top: 4px;
        font-weight: 500;
        color: $text-primary;
      }

      .ant-tag {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
      }

      .ant-progress-bg {
        background: rgba(255, 255, 255, 0.1);
      }

      .ant-btn-link {
        color: $primary-color;

        &:hover {
          color: $primary-color-lighter;
        }
      }
    }
  }

  // 新增/编辑档案模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: $text-primary;
      }
    }

    .ant-modal-body {
      background: transparent;
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      .ant-btn {
        &.ant-btn-primary {
          background: $primary-color;
          border-color: $primary-color;

          &:hover {
            background: $primary-color-light;
            border-color: $primary-color-light;
          }
        }

        &:not(.ant-btn-primary) {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: $text-primary;

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
            color: $primary-color;
          }
        }
      }
    }
  }

  .archive-form {
    .ant-form-item {
      margin-bottom: 24px;

      .ant-form-item-label > label {
        color: $text-primary;
      }
    }

    .ant-input,
    .ant-input-number,
    .ant-picker,
    .ant-select-selector,
    .ant-input-textarea {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: $text-primary;

      &:hover {
        border-color: $primary-color;
      }

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
      }
    }

    .ant-radio-wrapper {
      color: $text-primary;

      .ant-radio-checked .ant-radio-inner {
        border-color: $primary-color;
        background-color: $primary-color;
      }
    }
  }

  // 主要内容区域
  .main-content {
    margin-top: 0;

    .content-grid {
      align-items: flex-start;
    }

    .sidebar-panel {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    // 通用区域样式
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      backdrop-filter: blur(10px);

      &.compact {
        padding: 20px;
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;

          .section-icon {
            font-size: 20px;
            margin-right: 12px;
            color: $primary-color;
          }
        }
      }
    }

    // 业力分布样式
    .karma-distribution {
      .karma-item {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .karma-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .karma-range {
            font-size: 14px;
            color: $text-primary;
            font-weight: 500;
          }

          .karma-count {
            font-size: 13px;
            color: $text-secondary;
          }
        }

        .karma-progress {
          height: 6px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 3px;
          overflow: hidden;
          margin-bottom: 6px;

          .progress-bar {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
          }
        }

        .karma-percentage {
          font-size: 12px;
          color: $text-tertiary;
          text-align: right;
        }
      }
    }

    // 年龄分布样式
    .age-distribution {
      .age-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        &:last-child {
          border-bottom: none;
        }

        .age-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;

          .age-group {
            font-size: 14px;
            color: $text-primary;
            font-weight: 500;
          }

          .age-count {
            font-size: 13px;
            color: $text-secondary;
          }
        }

        .age-progress {
          width: 60px;
          height: 4px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 2px;
          overflow: hidden;
          margin-left: 12px;

          .progress-bar {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s ease;
          }
        }
      }
    }

    // 职业分布样式
    .profession-stats {
      .profession-item {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .profession-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;

          .profession-name {
            font-size: 13px;
            color: $text-primary;
          }

          .profession-count {
            font-size: 12px;
            color: $text-secondary;
          }
        }

        .profession-bar {
          height: 3px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 1.5px;
          overflow: hidden;

          .bar-fill {
            height: 100%;
            border-radius: 1.5px;
            transition: width 0.3s ease;
          }
        }
      }
    }

    // 最近活动样式
    .recent-activities {
      .activity-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .activity-dot {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          flex-shrink: 0;
          color: white;
          font-size: 12px;
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-size: 13px;
            font-weight: 500;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .activity-time {
            font-size: 11px;
            color: $text-tertiary;
          }
        }
      }
    }

    // 快速操作样式
    .quick-actions {
      .action-row {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .action-btn {
          flex: 1;
          height: 48px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          color: $text-primary;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 12px;

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
            color: $primary-color;
          }

          &.primary {
            background: rgba(114, 46, 209, 0.2);
            border-color: $primary-color;
            color: $primary-color;
          }

          :deep(.anticon) {
            font-size: 18px;
          }
        }
      }
    }
  }
}

// 响应式样式
@media (max-width: 1200px) {
  .archives-page {
    .stats-section .stats-grid {
      .stat-card {
        height: 100px;
        padding: 20px;

        .stat-icon {
          font-size: 28px;
          margin-right: 16px;
        }

        .stat-content .stat-value {
          font-size: 24px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .archives-page {
    padding: 16px;

    .archives-header {
      margin-bottom: 32px;
    }

    .stats-section {
      margin-bottom: 32px;

      .stats-grid {
        .stat-card {
          height: 80px;
          padding: 16px;

          .stat-icon {
            font-size: 24px;
            margin-right: 12px;
          }

          .stat-content {
            .stat-value {
              font-size: 20px;
            }

            .stat-title {
              font-size: 12px;
            }
          }
        }
      }
    }

    .search-card {
      margin-bottom: 24px;
    }

    .main-content {
      .content-grid {
        gap: 24px;
      }

      .sidebar-panel {
        gap: 24px;
      }

      .section-wrapper {
        padding: 16px;

        &.compact {
          padding: 16px;
        }

        .section-header .section-title {
          font-size: 16px;
        }
      }

      .quick-actions .action-row .action-btn {
        height: 44px;
        font-size: 11px;

        :deep(.anticon) {
          font-size: 16px;
        }
      }
    }

    .archive-detail-modal {
      .ant-modal {
        margin: 0;
        max-width: 100vw;
      }
    }
  }
}
</style>
